<template>
    <el-dialog v-model="forgetVisible" title="忘记密码" width="30%">
        <el-form ref="verifyEmailRef" :model="forgetFormData" :rules="rules" label-position="top">
            <el-form-item label="注册账号" prop="account">
                <el-input v-model="forgetFormData.account" placeholder="请输入注册账号"></el-input>
            </el-form-item>
            <el-form-item label="注册邮箱" prop="email" class="email">
                <el-input v-model="forgetFormData.email" placeholder="请输入注册邮箱"></el-input>
                <el-button type="primary" @click="sendEmailCodeFunc">发送验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="forgetFormData.code" placeholder="请输入邮箱验证码"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="button-wrap">
                <el-button @click="forgetVisible = false">取消</el-button>
                <el-button type="primary" @click="nextStep">下一步</el-button>
            </div>
        </template>

    </el-dialog>
    <el-dialog v-model="resetVisible" title="重置密码" width="30%">
        <el-form ref="resetPasswordRef" :model="forgetFormData" :rules="rules" label-position="top">
            <el-form-item label="新密码" prop="password">
                <el-input v-model="forgetFormData.password" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="forgetFormData.confirmPassword" placeholder="请再次输入新密码"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="button-wrap">
                <el-button @click="resetVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmReset">确认</el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { sendEmailCode, verifyEmailCode, resetPassword } from "@/api/login.js"


interface forgetFormData {
    account: string
    email: string
    code: string
    password: string
    confirmPassword: string
}
const verifyEmailRef = ref();
const resetPasswordRef = ref();
const forgetVisible = ref(false)
const resetVisible = ref(false)

const forgetFormData: forgetFormData = reactive({
    account: "",
    email: "",
    code: "",
    password: "",
    confirmPassword: ""
})


const rules = reactive({
    account: [{
        required: true, message: "请输入注册账号", trigger: "blur"
    }],
    email: [{
        required: true, message: "请输入注册邮箱", trigger: "blur"
    }],
    code: [{
        required: true, message: "请输入验证码", trigger: "blur"
    }],
    password: [{
        required: true, message: "请输入密码", trigger: "blur"
    }],
    confirmPassword: [{
        required: true, message: "请重新输入密码", trigger: "blur"
    }],
})


const open = () => {
    forgetVisible.value = true;
}
// 发送邮箱验证码
const sendEmailCodeFunc = () => {

    verifyEmailRef.value.validateField(["email", "account"], (val) => {
        if (val) {
            sendEmailCode("/api/getEmailCode", { account: forgetFormData.account, email: forgetFormData.email }).then(res => {
                if (res.data.status === 200) {
                    ElMessage.success(res.data.message)
                } else {
                    ElMessage.error(res.data.error)
                }
            })
        }
    })
}


const nextStep = () => {
    verifyEmailRef.value.validate((val) => {
        if (val) {
            verifyEmailCode("/api/verifyEmailCode", { account: forgetFormData.account, email: forgetFormData.email, code: forgetFormData.code }).then(res => {
                if (res.data.status === 200) {
                    forgetVisible.value = false;
                    resetVisible.value = true;
                } else {
                    ElMessage.error(res.data.error)
                }
            })
        }
    })


}

const confirmReset = () => {
    resetPasswordRef.value.validate(val => {
        if (val) {
            resetPassword("/api/updatePassword", {
                password: forgetFormData.password,
                confirmPassword: forgetFormData.confirmPassword,
                account: forgetFormData.account
            }).then(res => {
                if (res.data.status === 200) {
                    ElMessage.success(res.data.message);
                    resetVisible.value = false;
                } else {
                    ElMessage.error(res.data.error)
                }
            })
        }
    })
}


defineExpose({
    open
})



</script>
<style lang='scss' scoped>
.email {
    :deep(.el-form-item__content) {
        display: flex;
        justify-content: space-between;

        .el-input {
            width: calc(100% - 120px)
        }
    }
}
</style>